<template>
	<view>

		<view class="my-detail" v-if="loading&&detailData&&detailData.id"
			:style="{background: releaseType === 'news' ? '#f5f5f5' : ''}">

			<!-- <my-title v-if="releaseType !== 'resource'" title="基本信息"></my-title> -->
			<block v-if="type==1&&releaseType=='goods'">
				<DetailHeader :detailData="detailData" :releaseType="releaseType"></DetailHeader>
			</block>

			<block v-else-if="type==1&&releaseType=='crossborder'">
				<DetailHeader :detailData="detailData" :releaseType="releaseType"></DetailHeader>
				<Avatar v-if="releaseType !== 'news'" :info="releaseType === 'resource' ? detailData : detailData.user"
					:type="type">
				</Avatar>
			</block>
			<block v-else>
				<view style="height:10rpx;"></view>
				<!-- 中俄新闻类型 不显示头像组件    resource 为资源库  -->
				<Avatar v-if="releaseType !== 'news'" :info="releaseType === 'resource' ? detailData : detailData.user"
					:type="type">
				</Avatar>
			</block>

			<!-- <user-info v-if="releaseType !== 'resource'" :info="detailData.user"></user-info>   旧款样式  -->


			<!-- 中俄新闻类型 显示 自己的基本信息  -->
			<template v-if="releaseType === 'news'">
				<view class="newTitle">
					{{$t('基本信息')}}<u-icon class="icon" name="play-left"></u-icon>
				</view>
				<!-- 新闻组件 -->
				<AvatarNews :info="detailData"></AvatarNews>
			</template>

			<!-- 商品货物 基本信息 卡片 -->
			<Goods :item="detailData" :type="type" v-if="releaseType === 'goods'"></Goods>

			<!-- 运输 基本信息 卡片 -->
			<Transport :item="detailData" :type="type" v-if="releaseType === 'transport'"></Transport>

			<!-- 跨境货代 基本信息 卡片 -->
			<Crossborder :item="detailData" :type="type" v-if="releaseType === 'crossborder'"></Crossborder>


			<!-- <my-title :title="type === 1 ? '推广信息' : '竞标信息' "></my-title> -->
			<view class="cardBox" :class="type == 2 ? '' : ''">
				<!-- <Title cusStyle="margin: 0 -20rpx;"  :title="type === 1 ? '推广信息' : '竞标信息'"></Title> -->
				<!-- 详细信息 卡片 -->

				<show-detail :info="detailData" :type="releaseType" :lx="type"></show-detail>
			</view>

			<!--  多文字详情内容  多详情图片  上传视频    布局放在详细信息 卡片 底下 -->
			<Info :detailData="detailData" :releaseType="releaseType" :type="type"></Info>

			<!--  ('招标比价') ('参与竞标')      即时沟通等 按钮 -->
			<!-- releaseType !== 'resource'&& -->
			<button-group v-if="releaseType !== 'news'" :type="type" v-show="flag==0"
				:to-mobile="detailData.mobile||detailData.user.mobile" :release-id="detailData.id"
				:release-type="releaseType" :status="status">
			</button-group>


			<vipPopup v-if="vipShow" :show="vipShow" />

		</view>
		<view v-else>
			<u-empty></u-empty>
		</view>

	</view>
</template>

<script>
	import Avatar from "@/components/detail/Avatar.vue"
	import AvatarNews from "./com/AvatarNews.vue"
	import myTitle from "@/components/myTitle.vue";
	import showDetail from "@/components/showDetail.vue";
	import buttonGroup from "../components/buttonGroup.vue";
	import Goods from './com/Goods.vue'
	import Transport from './com/Transport.vue'
	import Crossborder from './com/Crossborder.vue'
	import Info from './com/Info.vue'
	import Title from '@/components/detail/Title.vue'
	import DetailHeader from './com/DetailHeader.vue'

	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';

	import {
		ImageUrl,
		isVideo,
		time,
		createC2CConversation
	} from "@/common/public";

	export default {
		data() {
			return {
				HTTP_IMG_UTL,
				vipShow: false,
				IMAGE_URL,
				loading: false,
				lang: getApp().globalData.lang,
				pictureDisplay: [],
				detailData: {},
				id: 0, // 商品id
				type: 1, // 1=推广，2=竞标
				releaseType: '',
				status: '',

				flag: 0,
				join_order_id: '',
			};
		},
		components: {
			showDetail,
			DetailHeader,
			buttonGroup,
			myTitle,
			Avatar,
			AvatarNews,
			Goods,
			Transport,
			Crossborder,
			Info,
			Title
		},
		onLoad(option) {
			console.log(option);
			if ((option) && (option.flag)) {
				this.flag = option.flag
			}

			this.join_order_id = option.join_order_id
			this.releaseType = option.releaseType
			this.id = parseInt(option.id)
			this.type = parseInt(option.type)
			this.status = option.status
			this.lang = this.$i18n.locale

			this.getDetail()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("详情页")
			})
		},
		methods: {
			ImageUrl,
			isVideo,
			time,
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title: "download...",
					mask: true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					if (progress === 100) {
						downloadTask.offProgressUpdate();
					}
				})
			},
			communicate() {
				createC2CConversation(this.detailData.user.mobile, this)
			},
			getDetail() {
				console.log(this.releaseType)
				switch (this.releaseType) {
					case 'goods':
						this.$u.api.collection.getGoodsDetail({
							id: this.id,
							join_order_id: this.join_order_id,
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'transport':
						this.$u.api.collection.getTransportDetailDetail({
							id: this.id
						}).then(res => {
							this.detailData = res

							this.detailData.buy_images = res.images
							this.detailData.buy_videos = res.videos
							this.detailData.buy_files = res.files

							this.loading = true
						})
						break;
					case 'crossborder':
						this.$u.api.collection.getCrossborderListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.desc
							this.detailData.content_ru = res.desc_ru

							this.detailData.buy_images = res.images
							this.detailData.buy_videos = res.videos
							this.detailData.buy_files = res.files

							this.loading = true
						})
						break;
					case 'professional':
						this.$u.api.collection.getProfessionalListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res

							this.detailData.content = res.con
							this.detailData.content_ru = res.con_ru


							this.loading = true
						})
						break;
					case 'resource':
						this.$u.api.collection.getLibraryDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.profile
							this.detailData.content_ru = res.profile_ru
							this.loading = true
						})
						break;
					case 'lifead':
						this.$u.api.collection.getLifeadListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'news':
						this.$u.api.collection.getNewsListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
					case 'exposure':
						this.$u.api.collection.getExposureListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.loading = true
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my-detail {
		background-color: #f6f6f6;
		padding-bottom: 160rpx;

		.cardBox {
			width: 90%;
			margin: 0 auto;
			background: #ddd;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			background: #fff;
			margin-bottom: 20rpx;
			position: relative;

			&.yellow {
				background: #fefcf6;
			}

		}

		.newTitle {
			width: 90%;
			margin: 0 auto;
			font-weight: 600;
			padding-top: 40rpx;

			.icon {
				margin-left: 10rpx;
				transform: rotate(-90deg);
				font-weight: normal;
			}
		}
	}
</style>